<template>
  <div class="home">
    <div class="logout">
      <div class="logout__info">
        <i class="el-icon-user-solid" />
        欢迎您，{{ userInfo.userName }}！
        <span @click="handleChange">
          <i class="el-icon-edit change-pass" />修改密码
        </span>
      </div>
      <div class="logout__fun" @click="logout">
        <i class="el-icon-location-information" />
        退出系统
      </div>
    </div>
    <div class="light" show="true">
      <!-- <div class="l">
        <img :src="limg" />
      </div>-->
      <div class="m">
        <img :src="midimg">
      </div>
      <!-- <div class="r">
        <img :src="limg" />
      </div>-->
    </div>
    <div class="section3">
      <div
        v-for="(item, index) in menus"
        :key="index"
        :class="'list' + index"
        class="section3-list"
        @mouseleave="mouseLeave(index)"
        @mouseover="mouseOver(index)"
      >
        <img
          v-if="item.url"
          :class="'img' + index"
          :src="item.iconCls"
          alt
          @click="handleJump(item.url)"
        >
        <img v-else :class="'img' + index" :src="item.iconCls" alt>
        <transition v-if="item.children && item.children.length > 0" name="fade">
          <div v-show="activeIndex === index" :class="'lg-menu-bg' + ' chiildbg' + index">
            <div v-for="(_item, _index) in item.children" :key="_index" class="title">
              <div v-if="_item.children" class="sub-name-parent">
                <div class="sub-name">
                  {{ _item.text }}
                  <img :src="line">
                </div>
                <div class="sub-child">
                  <div
                    v-for="(__item, __index) in _item.children"
                    :key="__index"
                    @click="handleJump(__item.url)"
                  >{{ __item.text }}
                  </div>
                </div>
              </div>
              <div v-else class="sub-title" @click="handleJump(_item.url)">
                {{ _item.text }}
                <img :src="line">
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      center
      title="修改密码"
      width="500px"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        label-width="80px"
        status-icon
      >
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            v-model="ruleForm.oldPassword"
            autocomplete="off"
            placeholder="请输入旧密码"
            type="password"
          />
        </el-form-item>
        <el-form-item label="密码" prop="newPassword">
          <el-input
            v-model="ruleForm.newPassword"
            autocomplete="off"
            placeholder="请输入新密码"
            type="password"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            v-model="ruleForm.checkPass"
            autocomplete="off"
            placeholder="请输入确认密码"
            type="password"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitFormCancle('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { genTestUserSig } from "public/debug/GenerateTestUserSig";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import { getMenuList } from "@/api";

export default {
  name: "Home",
  // inject: ["reload"],
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      showChild: false,
      activeIndex: null,
      line: require("@/assets/images/line.png"),
      limg: require("@/assets/images/r.png"),
      midimg: require("@/assets/images/m.png"),
      menus: [],
      ruleForm: {
        newPassword: "",
        checkPass: "",
        oldPassword: "",
      },
      dialogVisible: false,
      rules: {
        oldPassword: [{ required: true, trigger: "blur" }],
        newPassword: [
          { validator: validatePass, required: true, trigger: "blur" },
        ],
        checkPass: [
          { validator: validatePass2, required: true, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created () {
    if (!getToken()) {
      this.$message.error("用户凭证获取失败，请刷新重试！");
      return;
    }
  },
  mounted () {
    getMenuList().then(({ data }) => {
      this.menus = data.children;
    });
  },
  methods: {
    async logout () {
      await this.$store.dispatch("user/logout");
      this.$trtcCalling.logout();
      this.$router.push({ path: "/" });
    },
    handleChange () {
      this.dialogVisible = true;
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.userId = this.userInfo.id;
          this.ruleForm.userNo = this.userInfo.userId;
          changePassword(this.ruleForm).then(({ success, message }) => {
            this.$message({
              type: success ? "success" : "error",
              message,
            });
            if (success) this.logout();
            this.submitFormCancle(formName);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitFormCancle (formName) {
      this.dialogVisible = false;
      this.$refs[formName].resetFields();
      this.ruleForm = {
        newPassword: "",
        checkPass: "",
        oldPassword: "",
      };
    },
    mouseOver (index) {
      this.activeIndex = index;
    },
    mouseLeave () {
      this.activeIndex = null;
    },
    handleJump (url) {
      let href = "";
      if (url.includes("?")) {
        href = url + `&accessToken=${getToken()}`;
      } else {
        href = url + `?accessToken=${getToken()}`;
      }
      window.open(href, "_blank");
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  background: url(~@/assets/home/hm-bg.jpg) no-repeat;
  background-size: cover;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  position: relative;
}

.logout {
  color: #fff;
  position: absolute;
  right: 50px;
  top: 50px;
  display: flex;
  font-size: 14px;

  .logout__fun {
    margin-left: 12px;
    cursor: pointer;
  }

  .change-pass {
    margin-right: 6px;
  }

  span {
    cursor: pointer;
  }
}

.section3 {
  width: 1000px;
  height: 500px;
  position: relative;
}

.section3-list {
  position: relative;
}

.list0 {
  position: absolute;
  right: 80px;
  top: -20px;
}

.list1 {
  position: absolute;
  left: 230px;
}

.list2 {
  position: absolute;
  left: -50px;
  top: 170px;
}

.list3 {
  position: absolute;
  left: 200px;
  bottom: -100px;
}

.list4 {
  position: absolute;
  right: 100px;
  bottom: 20px;
}

@keyframes doScale {
  25% {
    top: scale(1.05);
  }
  50% {
    transform: scale(1.08);
  }
  75% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes jump {
  10% {
    top: 0px;
  }

  30% {
    top: 30px;
  }

  50% {
    top: 10px;
  }

  60% {
    top: 20px;
  }

  90% {
    top: 0px;
  }
}

@keyframes spin {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

.img0,
.img1,
.img3,
.img4 {
  width: 121px;
  height: 168px;
  cursor: pointer;
  animation: doScale 5s infinite ease-in-out;
}

.img2 {
  width: 152px;
  height: 168px;
  animation: doScale 5s infinite ease-in-out;
  cursor: pointer;
}

.supper {
  background: url(~@/assets/images/supper.png) no-repeat;
  width: 218px;
  height: 481px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
}

.lg-menu-bg {
  background: url(~@/assets/images/lg-menu-bg.png) no-repeat;
  background-size: 100% 100%;
  width: 216px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  padding: 50px 0;
}

.chiildbg0,
.chiildbg2,
.chiildbg3,
.chiildbg4 {
  left: 120px;
  top: -30px;
}

.chiildbg0 {
  background: url(~@/assets/images/supper.png) no-repeat;
  width: 218px;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
}

.chiildbg1 {
  left: 120px;
  top: -70px;
}

.chiildbg2 {
  left: -50px;
  top: 150px;
}

.title {
  color: rgb(223, 223, 223);
  margin: 8px 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;

  .sub-title:hover,
  .sub-child > div:hover {
    color: rgb(238, 171, 45);
  }
}

.sub-child > div {
  font-weight: normal;
  margin-top: 6px;
}

.sub-name,
.sub-title {
  position: relative;
  color: #c5f1f1;
  display: flex;
  align-items: center;
  justify-content: center;

  > img {
    position: absolute;
    bottom: -8px;
    // left: -20px;
  }
}

.sub-name {
  margin-bottom: 10px;
  cursor: default;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

.light {
  pointer-events: none;
  opacity: 0;
}

.light {
  pointer-events: none;
  opacity: 0;
}

.light > {
  z-index: 2;
}

.light[show] {
  opacity: 1;
}

.light .m {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  width: 380px;
  height: 120px;
}

.light .m img {
  position: absolute;
  margin: auto auto auto -90px;
  bottom: -45px;
  width: 500px;
  height: 100px;
  animation: to-center-animate-data 4.618s linear infinite;
}

@keyframes to-center-animate-data {
  0% {
    opacity: 0;
    margin-left: -250px;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  80% {
    opacity: 1;
  }
  to {
    opacity: 0;
    margin-left: 110px;
  }
}
</style>
